<template>
  <el-dialog
    :model-value="RoleShow"
    :title="RoleTitle"
    width="50%"
    @close="Cancel"
  >
    <div>
      <p>当前的用户：{{ RoleData.username }}</p>
      <p>当前的角色：{{ RoleData.role_name }}</p>
      <p>
        分配新角色：<el-select
          v-model="SelectedRoleId"
          class="m-2"
          placeholder="请选择"
          size="large"
        >
          <el-option
            v-for="item in Roles"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          />
        </el-select>
      </p>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="Confirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, Ref, ref, defineProps } from "vue";
import { ElTree, ElMessage } from "element-plus";

import apis from "@/http/apis";
interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}

let prop = defineProps({
  RoleShow: Boolean,
  RoleTitle: String,
  RoleData: {
    type: Object,
    default: {},
  },
});
console.log(prop.RoleData, "666");

//定义递归函数来遍历出当前点击对象中已经被选中的节点
const isChecked = (tree: Idata, arr: Object[]) => {
  //如果没有children属性说明是最终子节点
  if (!tree.children) {
    return arr.push(tree.id);
  }
  tree.children.forEach((item: any) => {
    isChecked(item, arr);
  });
};
const SelectedRoleId = ref(""); //当前选中的角色id

let Roles: any = ref([]); //下拉选择框可以选择的选项数组
//初始获取所有角色列表
const Rolelist = async () => {
  const res: any = await apis.getRoleList();
  Roles.value = res.data;
  console.log(Roles.value, "角色列表");
};
Rolelist();
//定义关闭弹窗的自定义事件
const emits = defineEmits(["closePop"]);
//关闭和取消触发的事件
const Cancel = () => {
  // console.log("自定义事件触发");

  emits("closePop", false);
};

//确定处理函数
const Confirm = async () => {
  if (!SelectedRoleId.value) {
    return ElMessage({
      message: "请选择要添加的角色!",
      type: "error",
    });
  } else {
    const res: any = await apis.AddRole({
      id: prop.RoleData.id,
      rid: SelectedRoleId.value,
    });
    if (res.meta.status == 200) {
      ElMessage({
        message: "分配角色成功",
        type: "success",
      });
    }
  }
  Cancel();
};
</script>

<style lang="Less" scoped></style>
